﻿import * as React from 'react'
import 颜色 from '../工具代码/颜色'
import 数 from '../工具代码/数'

export interface 控件基类 {
    权限?: string,
    定位方式?: string,
    x?: number,
    y?: number,
    宽度?: 数,
    高度?: 数,
    颜色?: 颜色,
    背景色?: 颜色,
    边框?: 边框,
    阴影?: 阴影,
    圆角?: number,
    是否启用?: boolean,
    自定义样式?: React.CSSProperties,
    自定义经过样式?: React.CSSProperties,
    自定义点击样式?: React.CSSProperties,
    自定义禁用样式?: React.CSSProperties
}

export const 定位方式 = {
    绝对定位: 'absolute',
    窗口定位: 'fixed',
    相对定位: 'relative',
    无定位: 'static',
    继承:'inherit'
}


export class 基本样式 {
    private 定位方式: string
    private x:number
    private y:number
    private 宽度: 数
    private 高度: 数
    private 颜色: 颜色
    private 背景色: 颜色
    private 边框: 边框
    private 阴影: 阴影
    private 圆角:number

    constructor(props) {
        this.定位方式 = props.定位方式
        this.x = props.x
        this.y = props.y
        this.宽度 = props.宽度
        this.高度 = props.高度
        this.颜色 = props.颜色
        this.背景色 = props.背景色
        this.边框 = props.边框
        this.阴影 = props.阴影
        this.圆角 = props.圆角
    }
    get 取值() {
        return {
            position: this.定位方式 ? this.定位方式 : 'relative',
            top: this.y ? this.y : '',
            left: this.x ? this.x : '',
            width: this.宽度 ? this.宽度.取值 : '',
            height: this.高度 ? this.高度.取值 : '',
            color: this.颜色 ? this.颜色.取值 : '',
            backgroundColor: this.背景色 ? this.背景色.取值 : '',
            border: this.边框 ? this.边框.取值 : '',
            boxShadow: this.阴影 ? this.阴影.取值 : '',
            borderRadius: this.圆角 ? this.圆角 : '',
            WebkitAppRegion: 'no-drag'
        }
    }
    get 取经过样式() {
        return {
            backgroundColor: 颜色.加(this.背景色, 颜色.rgb(20, 20, 20)).取值,
            color: 颜色.加(this.颜色, 颜色.rgb(10, 10, 10)).取值
        }
    }

    get 取点击样式() {
        return {
            backgroundColor: 颜色.减(this.背景色, 颜色.rgb(20, 20, 20)).取值,
            color: 颜色.减(this.颜色, 颜色.rgb(10, 10, 10)).取值
        }
    }
    get 取禁用样式() {
        return {
            color:this.颜色? 颜色.rgb(100, 100, 100).取值:'',
            backgroundColor: this.背景色? 颜色.rgb(200, 200, 200).取值:'',
            border: this.边框 ? this.边框.改变颜色(颜色.rgb(155, 155, 155)) : '',
            boxShadow: this.阴影 ? this.阴影.改变颜色(颜色.rgb(155, 155, 155)) : '',
            WebkitFilter:'grayscale(1)'
        }
    }
}

export class 阴影 {
    private 水平: number
    private 垂直: number
    private 模糊: number
    private 阴影距离: number
    private 颜色: 颜色
    private 位置值: string
    constructor(水平距离?: number, 垂直距离?: number, 模糊?: number, 阴影距离?: number, 阴影颜色?: 颜色, 位置?: string) {
        this.水平 = 水平距离 ? 水平距离 : 0
        this.垂直 = 垂直距离 ? 垂直距离 : 0
        this.模糊 = 模糊 ? 模糊 : 0
        this.阴影距离 = 阴影距离 ? 阴影距离 : 0
        this.颜色 = 阴影颜色 ? 阴影颜色 : 颜色.rgb(0, 0, 0)
        this.位置值 = 位置 ? 位置 : ''
    }
    get 取值() {
        return `${this.水平.toString()}px ${this.垂直.toString()}px ${this.模糊.toString()}px ${this.阴影距离.toString()}px ${this.颜色.取值} ${this.位置值.toString()}`
    }
    改变颜色(新颜色: 颜色) {
        return `${this.水平.toString()}px ${this.垂直.toString()}px ${this.模糊.toString()}px ${this.阴影距离.toString()}px ${新颜色.取值} ${this.位置值.toString()}`
    }
}

export class 边框 {
    private 宽度: number
    private 样式: string
    private 颜色: 颜色
    constructor(宽度?: number, 样式?: string, 边框颜色?: 颜色) {
        this.宽度 = 宽度 ? 宽度 : 1
        this.样式 = 样式 ? 样式 : 'solid'
        this.颜色 = 边框颜色 ? 边框颜色 : 颜色.rgb(0, 0, 0)
    }
    get 取值() {
        return `${this.宽度}px ${this.样式} ${this.颜色.取值}`
    }
    改变颜色(新颜色: 颜色) {
        return `${this.宽度}px ${this.样式} ${新颜色.取值}`
    }
}

export enum 判断 {
    真,
    假
}

export const 隐藏: React.CSSProperties = {
    display: 'none'
}

export const 显示: React.CSSProperties = {
    display: 'block'
}
